<template>
  <view>
    <nut-tabs v-model="tabValue" >
      <nut-tab-pane title="开票申请" pane-key="1" >
      </nut-tab-pane>
      <nut-tab-pane title="开票历史" pane-key="2" ></nut-tab-pane>
    </nut-tabs>
    <template v-if="tabValue=='1'">
      <view class="big">
        <headerSearch
            :query="query"
            @quryList="quryList"
            @search="search"
        ></headerSearch>
        <view v-if="showList.length">
          <view class="search_list">
            <ListItem
                v-for="(item, index) in showList"
                :key="index"
                :item="item"
                class="item"
                @chooseAll="chooseAll"
                :showList="showList"
            />
            <view class="foot">
              <nut-checkbox v-model="checkAll" @change="checkBtn" label="全选"
              >全选</nut-checkbox
              >
              <view class="btnBox">
                <view style="margin-right: 10px; display: flex"
                ><span class="botMsg1">总额</span
                ><span class="botMsg2">￥{{ allpriceFilter() }}</span></view
                >
                <nut-button
                    type="info"
                    class="invoicingMore"
                    @click="invoicingMore"
                    color="#0966ff"
                >申请开票</nut-button>
              </view>
            </view>
          </view>
        </view>
        <view v-else>
          <div class="emptyMain">
            <div class="emptyImg"></div>
            <p>暂无信息</p>
          </div>
        </view>
      </view>
    </template>
    <template v-if="tabValue=='2'">
      <History></History>
    </template>
  </view>
</template>
<script lang="ts" setup>
import { computed, onMounted, ref, watch } from "vue";
// import { OrderListType } from "../orderTracking/listType";
import { changeList, $post } from "@/@api/index";
import History from "./history.vue";
import ListItem from "./ListItem.vue";
import headerSearch from "./headerSearch.vue";
import { useDidShow } from "@tarojs/taro";
import Taro from "@tarojs/taro";
import useUserInfoStore from "../../store/user";
import useInvoicingStore from "../../store/invoicing";
import useTransactionStore, { transaction } from "../../store/pickUp";
const userStore = useUserInfoStore();
const transactionStore = useTransactionStore();
const invoicingStore = useInvoicingStore();

const checkAll = ref<boolean>(false); //全选按钮
const checkList = ref(); //选中的单子集合
const tabValue = ref<string>('1');
const query = ref({
  keywords: "",
  wxStatus: "",
  start: "",
  end: "",
  flag: "",
});
const params = ref({
  pageNum: 1,
  pageSize: 10000,
});
const loading = ref(false);
const formList = ref<any>([]);

// 懒加载参数
const list = ref<any>([]);

function handleScroll() {

  if (!loading.value) {
    loading.value = true;
    onLoadList();
  }
}
//批量开票
function invoicingMore() {
  let list: any = [];
  showList.value.forEach((aa: any) => {
    if (aa.check) {
      list.push(aa);
    }
  });
  if(list.length === 0){
    Taro.showToast({
      icon: 'none',
      title: '请先选择订单'
    })
    return
  }
  invoicingStore.invoicingList = list;
  Taro.navigateTo({
    url: "/pages/invoicing/apply",
  });
}
//选择的订单总金额计算
function allpriceFilter() {
  let allMoney = 0;
  showList.value.forEach((item: any) => {
    if (item.check) {
      item.costList.forEach((aa: any) => {
        allMoney += aa.money * 1;
      });
    }
  });

  return allMoney;
}
function chooseAll(flag: boolean) {
  if (flag) {
    checkAll.value = true;
  } else {
    checkAll.value = false;
  }
}
function checkBtn() {
  if (!checkAll.value) {
    showList.value.forEach((aa: any) => {
      aa.check = false;
    });
  } else {
    showList.value.forEach((aa: any) => {
      aa.check = true;
    });
  }
}


function quryList(item) {
  query.value.start = item.start;
  query.value.end = item.end;
  query.value.flag = item.flag;
  initList();
}
//搜索
function search(keywords: string) {

  query.value.keywords = keywords;
  initList();
}

// 筛选其他数据
const showList = computed(() => {
  return formList.value;
});
// 初始化列表
async function initList() {//http://192.168.10.32:38080
  const res: any = await $post(
    "/selfmachine-system/invoice/runningList?pageNum=" +
      params.value.pageNum +
      "&pageSize=" +
      params.value.pageSize,
    {
      customerCode: userStore.userInfo.customerCode,
      startDate: query.value.start,
      endDate: query.value.end,
      keywords: query.value.keywords,
      // billNo: 202302455,
    }
  );
  if (res.data.code == 200) {
    formList.value = res.data.data.list || [];

    formList.value.forEach((item: any) => {
      item.check = false;
    });
    Taro.hideLoading();
  }

  // 数据全部加载完成
  if (formList.value.length >= res.data.data.total) {
    loading.value = true;
  }
}
// 懒加载
async function onLoadList() {
  loading.value = true;
  params.value.pageNum++;
  initList();
}
const emit = defineEmits<{
  (e: "backtoIndex");
}>();

watch(()=>tabValue.value,(newVal)=>{
  if(newVal=='1'){
    Taro.showLoading({
      title: "加载中",
      mask: true,
    })
    initList()
  }
},{immediate: true})


//返回到首页
function goback() {
  emit("backtoIndex");
}
</script>
<style lang="scss">
page {
  background-color: #f5f5f5;
  --nut-tabs-horizontal-tab-line-color: #0966ff;
  --nut-tabs-titles-item-active-color: #0966ff;
}
.nut-tab-pane {
  padding: 0 !important;
  background-color: #f5f5f5;
}
.big {
  overflow: hidden;
}
.emptyBox {
  height: 176rpx;
}
.search_list {
  // height: 50rpx !important;
  overflow: auto;
  height: calc(100vh - 340rpx) !important;
  // padding: 0 24rpx !important;
  box-sizing: border-box;
  background-color: #f5f5f5;

  .item {
    width: 700rpx;
    height: 436rpx !important;
    background-color: #fff;
    margin: 24rpx;
    border-radius: 10rpx;
    // box-sizing: border-box;
    // padding-top: 20rpx;
  }

  .title {
    position: fixed;
    background: white;
    z-index: 5;
    top: 0;
    padding-top: 88rpx;
    height: 88rpx;
    width: 100%;
    text-align: center;
    line-height: 88rpx;
    font-size: 34rpx;
    display: flex;
    .backIcon {
      line-height: 88rpx;

      height: 88rpx;
      width: 88rpx;
    }
    .titleMsg {
      text-align: center;
      margin-left: -44rpx;
      flex: 1;
    }
  }
}
.emptyMain {
  margin: 0 auto;
  margin-top: 200rpx !important;
  width: 300rpx;
  .emptyImg {
    height: 300rpx;
    width: 300rpx;
    background: url("../../assets/images/index/我的订单/wodedingdan_img_quesheng.png")
      no-repeat;
    background-size: cover;
  }
  p {
    text-align: center;
    margin-top: 30rpx;
    color: rgb(171, 171, 171);
  }
}
.foot {
  z-index: 10;
  display: flex;
  justify-content: space-between;
  height: 128rpx;
  width: 100%;
  position: fixed;
  bottom: 0rpx;
  box-sizing: border-box;
  border-top: 2rpx solid rgb(215, 215, 215);
  border-bottom: 2rpx solid rgb(215, 215, 215);
  background: white;
  line-height: 128rpx;
  padding: 0 24rpx;
  .btnBox {
    display: flex;
    // margin-top: -25rpx;
    .invoicingMore {
      margin-top: 25rpx;
    }
    .botMsg1 {
      font-size: 24rpx;
      color: #666666;
    }
    .botMsg2 {
      font-size: 40rpx;
      color: #0966ff;
    }
  }
}

</style>
